<script setup lang='ts'>
import { onMounted, reactive, h, ref } from 'vue'
import { useMessage, NButton, zhCN, dateZhCN } from 'naive-ui'
import { ExcelService } from "@/utils/exportToExcel"
import { order_Form, Information_Desk, order_Information } from '@/views/order/orderList/orderList-data-table'

import { useorderList } from '@/stores/orderList'

const _orderList = useorderList()

onMounted(async () => {
    await _orderList.getorderList()
})
//查询
const formqueryRef = ref(null)
const formQueryValue = ref({
    inputValue: '',
    selectValue: '',
    datetimeValue: '',
    radioGroupValue: ''
})
const generalOptions = ['groode', 'veli good', 'emazing', 'lidiculous'].map(
    (v) => ({
        label: v,
        value: v
    }))

//表格
const orderForm = [
    ...order_Form,
    {
        title: '订单状态',
        key: 'status',
        align: "center",
        render(row: any) {
            return h(
                'span',
                {},
                { default: () => `${row.status ? '已结账' : '未结账'}` }
            )
        }
    },
    {
        title: "操作",
        key: "operate",
        align: "center",
        render(row: any) {
            return h(
                NButton,
                {
                    strong: true,
                    type: 'primary',
                    size: 'small',
                    onClick: () => check(row)
                },
                { default: () => '查看' }
            )
        }
    }
]
type RowData = {
    _id: string
}
const rowKey = (row: RowData) => row._id
//桌台表格
const InformationDesk = [
    ...Information_Desk,
    {
        title: "操作",
        key: "operate",
        align: "center",
        render(row: any) {
            return h(
                NButton,
                {
                    strong: true,
                    type: 'primary',
                    size: 'small',
                    onClick: () => changeBtn(row)
                },
                { default: () => '更换台座' }
            )
        }
    }
]
//菜品信息表格
const FoodInformation = [
    {
        title: '菜品信息',
        align: "center",
        render(row: any) {
            return h(
                'span',
                {},
                { default: () => `${row.name}` }
            )
        }
    },
    {
        title: '原价',
        align: "center",
        render(row: any) {
            return h(
                'span',
                {},
                { default: () => `${row.price}` }
            )
        }
    },
    {
        title: '折扣',
        align: "center",
        render(row: any) {
            return h(
                'span',
                {},
                { default: () => `---` }
            )
        }
    },
    {
        title: '现价',
        align: "center",
        render(row: any) {
            return h(
                'span',
                {},
                { default: () => `${row.price}` }
            )
        }
    }
]
//订单信息表格
const orderInformation = [
    ...order_Information,
    {
        title: '优惠金额',
        align: "center",
        render(row: any) {
            return h(
                'span',
                {},
                { default: () => '---' }
            )
        }
    },
    {
        title: '支付方式',
        align: "center",
        render(row: any) {
            return h(
                'span',
                {},
                { default: () => '在线支付' }
            )
        }
    }
]
//点击查看按钮 点击关闭
const showModal = ref(false)
const FormInformation = reactive({
    StageDes: [],
    cuisine: [],
    order: []
})
const close = () => {
    showModal.value = false
}
function check(row: any) {
    FormInformation.StageDes = []
    FormInformation.order = []
    const { _id, dishInfo, index, notes, peopleNum, status, tableNum, time, totalMoney } = row
    FormInformation.StageDes.push({ _id, tableNum, totalMoney, peopleNum, dishInfo, notes, status })
    FormInformation.cuisine = dishInfo
    FormInformation.order.push({ dishInfo, time, totalMoney, index })
    showModal.value = true
}
//分页
async function updatepage(page: number) {
    _orderList.page = page
    await _orderList.getorderList()
}
async function updatepageSize(pageSize: number) {
    _orderList.pageSize = pageSize
    await _orderList.getorderList()
}
//更换台座
const pedestalfrom = ref({
    tableNum: ''
})
const pedestal = ref(false)
const changeBtn = (row: any) => {
    Object.assign(pedestalfrom.value, row)
    pedestal.value = true
}

async function confirmBtn() {
    await _orderList.postpedestalfrom(pedestalfrom.value)
    FormInformation.StageDes[0].tableNum = pedestalfrom.value.tableNum
    pedestal.value = false
    await _orderList.getorderList()
}

// 导出
const json = ref([])

const exportExcel = async () => {
    let orderArr = await _orderList.getorderListExport()
    orderArr.forEach((item) => {
        let obj = {
            "订单编号": item.index,
            "下单时间": item.time,
            "订单金额": item.totalMoney,
            "桌号": item.tableNum,
            "订单状态": item.status ? "已结账" : "未结账"
        }
        json.value.push(obj)
    })
    const s = new ExcelService();
    s.exportAsExcelFile(json.value, "订单统计");
}

</script>

<template>
    <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
        <header>
            <n-breadcrumb class="breadcrumb">
                <n-breadcrumb-item style="margin-left: 10px;">订单统计</n-breadcrumb-item>
                <n-breadcrumb-item>统计列表</n-breadcrumb-item>
            </n-breadcrumb>
            <section class="from">
                <n-form ref="formqueryRef" inline :model="formQueryValue" label-placement="left">
                    <n-form-item label="下单时间:" path="radioGroupValue">
                        <n-radio-group v-model:value="formQueryValue.radioGroupValue" name="radiogroup2">
                            <n-radio-button value="Radio 1">
                                全部
                            </n-radio-button>
                            <n-radio-button value="Radio 2">
                                今天
                            </n-radio-button>
                            <n-radio-button value="Radio 3">
                                明天
                            </n-radio-button>
                        </n-radio-group>
                    </n-form-item>
                    <n-form-item path="datetimeValue">
                        <n-date-picker v-model:value="formQueryValue.datetimeValue" type="daterange" clearable />
                    </n-form-item>
                    <n-form-item label="桌号" path="inputValue">
                        <n-input v-model:value="formQueryValue.inputValue" placeholder="请输入" />
                    </n-form-item>
                    <n-form-item label="桌号" path="selectValue">
                        <n-select v-model:value="formQueryValue.selectValue" style="width: 150px;" placeholder="请选择"
                            :options="generalOptions" />
                    </n-form-item>
                    <n-form-item>
                        <n-button attr-type="button">
                            验证
                        </n-button>
                    </n-form-item>
                </n-form>
            </section>
        </header>
        <section class="table">
            <nav class="table_nav">
                <span>商品数量:{{ _orderList.total }}</span>
                <n-button type="warning" @click="exportExcel">
                    导出
                </n-button>
            </nav>
            <section class="table_main">
                <n-data-table :single-line="false" :columns="orderForm" :data="_orderList.orderlist" :row-key="rowKey"
                    @update:checked-row-keys="handleCheck" />
                <n-space justify="end">
                    <n-pagination show-size-picker show-quick-jumper
                        :display-order="['quick-jumper', 'pages', 'size-picker']" :page="_orderList.page"
                        :page-size="_orderList.pageSize" :item-count="_orderList.total" :page-sizes="[3, 5, 7, 10]"
                        @update:page="updatepage" @update:page-size="updatepageSize" />
                </n-space>
            </section>
        </section>

        <!-- 点击查看弹出框 -->
        <n-modal v-model:show="showModal" :mask-closable="false">
            <n-card style="width: 950px" class="modal_card" title="使用中" :bordered="false" size="huge" role="dialog"
                aria-modal="true">
                <template #header-extra>
                    <section class="modal_card_btn">
                        <n-button type="tertiary">
                            释放台桌
                        </n-button>
                        <n-button type="primary">
                            打印小票
                        </n-button>
                        <n-button type="error" @click="close">
                            关闭
                        </n-button>
                    </section>
                </template>
                <n-space vertical size="large">
                    <n-layout>
                        <n-layout-header>台卓信息</n-layout-header>
                        <n-layout-content style="margin-top: 15px;">
                            <n-data-table :single-line="false" single-column :columns="InformationDesk"
                                :data="FormInformation.StageDes" />
                        </n-layout-content>
                    </n-layout>
                    <n-layout>
                        <n-layout-header>菜品信息</n-layout-header>
                        <n-layout-content style="margin-top: 15px;">
                            <n-data-table striped :single-line="false" single-column :columns="FoodInformation"
                                :data="FormInformation.cuisine" />
                        </n-layout-content>
                    </n-layout>
                    <n-layout>
                        <n-layout-header>订单信息</n-layout-header>
                        <n-layout-content style="margin-top: 15px;">
                            <n-data-table striped :single-line="false" single-column :columns="orderInformation"
                                :data="FormInformation.order" />
                        </n-layout-content>
                    </n-layout>
                </n-space>
            </n-card>
        </n-modal>

        <n-modal v-model:show="pedestal" preset="dialog" :mask-closable="false">
            <template #header>
                <div>更换台桌</div>
            </template>
            <n-form ref="pedestalfromRef" label-placement="left" :model="pedestalfrom">
                <n-form-item label="输入台桌号:" path="ipt">
                    <n-input v-model:value="pedestalfrom.tableNum" placeholder="请输入台桌号" />
                </n-form-item>
            </n-form>
            <template #action>
                <div>
                    <n-button>取消</n-button>
                    <n-button type="primary" @click="confirmBtn">
                        确定
                    </n-button>
                </div>
            </template>
        </n-modal>
    </n-config-provider>
</template>

<style scoped>
.breadcrumb {
    background-color: #e9eff5;
    line-height: 40px;
    font-size: 16px;
}

.from form {
    padding-top: 15px;
}

section .table_nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    align-content: center;
    margin-bottom: 10px;
}

section .table_nav span {
    font-size: 16px;
    color: #7764ca;
}

.modal_card_btn button {
    margin-left: 15px;
}
</style>